import 'package:ati_package/core/extension/ati_widgets_extension.dart';
import 'package:ati_package/pages/common/ati_scaffold.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../../../core/utils/ati_color.dart';
import '../../../../core/utils/ati_font.dart';
import '../../../common/widgets/ati_text_input.dart';

class RealnameInputView extends StatefulWidget {
  const RealnameInputView({super.key});

  @override
  State<RealnameInputView> createState() => _RealnameInputViewState();
}

class _RealnameInputViewState extends State<RealnameInputView> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return AtiScaffold(title: '实名认证', body: _buildTextInputWidget());
  }

  _buildTextInputWidget() {
    return Column(children: [_buildTextInput(), _buildFootbtn()]);
  }

  _buildTextInput() {
    return Container(
      padding: EdgeInsets.only(top: 20.r, left: 16.r, right: 16.r),
      child: FormBuilder(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AtiTextInput(
              name: 'oldPassword',
              label: '姓名',
              hint: '请输入姓名',
              showClearButton: true,
              validator: (val) => val == null || val.isEmpty ? '请输入姓名' : null,
            ),
            AtiTextInput(
              name: 'newPassword',
              label: '证件号码',
              hint: '请输入证件号码',
              showClearButton: true,
              validator: (val) => val == null || val.isEmpty ? '请输入证件号码' : null,
            ),
          ],
        ),
      ),
    );
  }

  _buildRealnameWidgets() {
    return Column(
      children: [
        // ✅ 顶部通过提示区域
        Container(
          width: double.infinity,
          padding: EdgeInsets.symmetric(vertical: 35.r),
          margin: EdgeInsets.only(
            left: 16.r,
            right: 16.r,
            top: 16.r,
            bottom: 2.5.r,
          ),
          decoration: BoxDecoration(
            color: Color(0xFFE6F7EE),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Column(
            children: [
              Icon(Icons.check_circle, color: AtiColor.primary, size: 60),
              SizedBox(height: 12.5.r),
              Text(
                '已通过',
                style: TextStyle(
                  color: AtiColor.primary,
                  fontSize: AtiFont.font18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 5.r),
              Text(
                '您已通过实名认证！',
                style: TextStyle(
                  color: Color(0xFF666666),
                  fontSize: AtiFont.font14,
                ),
              ),
            ],
          ),
        ),

        // ✅ 认证信息展示
        Flexible(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(12.5.r),
                topRight: Radius.circular(12.5.r),
              ),
            ),
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20.r, vertical: 12.5.r),
              child: Column(
                children: [
                  _buildInfoRow('真实姓名', '李**', Color(0xFFE6F7EE)),
                  Divider(height: 1.r, color: AtiColor.pageColor),
                  _buildInfoRow(
                    '证件号码',
                    '32**************38',
                    Color(0xFFE6F7EE),
                  ),
                  const SizedBox(height: 12),
                  Container(
                    width: double.infinity,
                    padding: EdgeInsets.symmetric(
                      horizontal: 16.r,
                      vertical: 15.r,
                    ),
                    decoration: BoxDecoration(
                      color: AtiColor.pageColor,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Column(
                      children: [
                        Text(
                          '认证时间',
                          style: TextStyle(
                            color: Color(0xFF666666),
                            fontSize: 14,
                          ),
                        ),
                        SizedBox(height: 5.r),
                        Text(
                          '2025-10-20 14:14:23',
                          style: TextStyle(
                            color: AtiColor.textColor1,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ],
                    ),
                  ),
                  _buildFootbtn(),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildInfoRow(String label, String value, Color textColor) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 12.5.r),
      child: Row(
        children: [
          Text(
            label,
            style: TextStyle(
              color: AtiColor.textColor1,
              fontSize: 15.r,
              fontWeight: FontWeight.w500,
            ),
          ),
          const Spacer(),
          Text(
            value,
            style: TextStyle(color: Color(0xFF666666), fontSize: 15.r),
          ),
        ],
      ),
    );
  }

  _buildFootbtn() {
    return Container(
      height: 40.r,
      alignment: Alignment.center,
      margin: EdgeInsets.only(left: 50.r, right: 50.r, top: 50.r),
      decoration: BoxDecoration(
        gradient: AtiColor.primaryGradient,
        borderRadius: BorderRadius.circular(20.r),
      ),
      child: Text(
        '提交',
        style: TextStyle(
          color: AtiColor.textHLColor1,
          fontSize: AtiFont.font14,
        ),
      ),
    ).addTapGesture(onTap: () {});
  }
}
